<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>

    <style>
        body {
            margin: 0;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            background-color: #f0f2f5;
        }
        #app {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .login-card {
            width: 400px;
        }
        .login-title {
            text-align: center;
            margin-bottom: 24px;
            font-size: 22px;
            font-weight: 600;
            color: #333;
        }
        .login-button {
            width: 100%;
        }
    </style>
</head>
<body>
<div style="flex: 1; flex-direction: column; height: 100vh; width: 100vw">
<div style="background-color: dodgerblue; height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex; align-items: center; font-size: 25px">
    <div style="width: 200px; font-weight: bold; color: white;  padding-left: 20px">熙康体检系统</div>
    <div style="flex: 1"></div>
    <div style="display: flex; justify-content: end; padding-right: 25px">
        <el-button :icon="Message" circle />
    </div>
    <div style="width:100px; display: flex; padding-right: 20px; justify-content: end">
        <el-dropdown>
            <el-button type="primary" plain>关于我们</el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>公司简介</el-dropdown-item>
                    <el-dropdown-item>官方网站</el-dropdown-item>
                    <el-dropdown-item>更多内容</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</div>
    <div id="app">
        <el-card class="login-card">
            <h2 v-if="!register" class="login-title">系统登录</h2>
            <h2 v-if="register" class="login-title">系统注册</h2>
            <el-form :model="form" label-width="0px">
                <el-form-item>
                    <el-input 
                        v-model="form.username" 
                        placeholder="请输入用户名" 
                        :prefix-icon="User"
                        size="large">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                        v-model="form.password" 
                        type="password" 
                        placeholder="请输入密码" 
                        show-password
                        :prefix-icon="Lock"
                        size="large">
                    </el-input>
                </el-form-item>
                <el-form-item>
                <el-input v-if="register"
                        v-model="form.repassword"
                        type="password"
                        placeholder="请重复密码"
                        show-password
                        :prefix-icon="Lock"
                        size="large">
                </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="!register" class="login-button" type="primary" size="large">登 录</el-button>
                    <el-button v-if="register" class="login-button" type="primary" size="large">注册</el-button>
                </el-form-item>
				<el-button v-if="!register" @click="register = true">没有账户？点击注册</el-button>
				<el-button v-if="register" @click="register = false">已经有账户了？点击登录</el-button>
                <el-switch style="margin-left: 10px" active-value="true" v-model="rememberPassword" size="small" active-text="记住密码"/>
            </el-form>
        </el-card>
    </div>
</div>

    <script>
        const { createApp, ref } = Vue;
        const app = createApp({
            data() {
                return {
                    register : false,
                    rememberPassword : false,
                }
            },

            setup() {
                const form = ref({
                    username: '',
                    password: '',
                    repassword : '',
                });

                return {
                    form,
                    // 从 ElementPlusIconsVue 中解构图标
                    User: ElementPlusIconsVue.User,
                    Lock: ElementPlusIconsVue.Lock
                };
            },
        });

        // 注册 Element Plus 插件和所有图标
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }

        app.mount('#app');
    </script>
</body>
</html>